<template>
	<view class="bg-white">
		<cu-custom :isBack="false">
			<block slot="content">圈子 - 发现有趣</block>
		</cu-custom>
		<view class="flex justify-start align-start padding-bottom" style="flex-direction: column;">
			<view class="flex justify-between align-center padding-left padding-right padding-top-sm padding-bottom"
				style="width: 100%;">
				<text class="text-df text-lg text-bold">热门圈子</text>
				<text @tap="jumpToAllCircle" class="text-gray">查看更多</text>
			</view>
			<view class="flex justify-start align-center padding-left" style="width: 100%;">
				<view @tap="jumpToRecommendCircleProfile(0)" class="first-img-box">
					<image class="bg-gray" mode="aspectFill" :src="topCircleList[0].avatar">
					</image>
					<view class="first-name-mask">
					</view>
					<text class="first-name-label">{{topCircleList[0].name}}</text>
				</view>
				<view class="flex justify-start align-center" style="flex-direction: column;width: 60%;">
					<view @tap="jumpToRecommendCircleProfile(1)" class="second-img-box">
						<image class="bg-gray" mode="aspectFill" :src="topCircleList[1].background">
						</image>
						<view class="first-name-mask">
						</view>
						<text class="first-name-label">{{topCircleList[1].name}}</text>
					</view>
					<view style="height: 7px;"></view>
					<view @tap="jumpToRecommendCircleProfile(2)" class="second-img-box">
						<image class="bg-gray" mode="aspectFill" :src="topCircleList[2].background">
						</image>
						<view class="first-name-mask">
						</view>
						<text class="first-name-label">{{topCircleList[2].name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 圈友 -->
		<view style="height: 5px;" class="bg-gray"></view>
		<view class="flex justify-start align-start padding-bottom" style="flex-direction: column;width: 100%;">
			<view class="flex justify-between align-center padding-left padding-right padding-bottom padding-top-sm"
				style="width: 100%;">
				<text class="text-df text-lg text-bold">活跃圈友</text>
				<text class="text-gray">滑动查看</text>
			</view>
			<scroll-view style="white-space: nowrap;overflow: hidden;padding-left: 10px;padding-right: 10px;"
				scroll-x="true">
				<view class="padding-right" style="display: inline-block;" v-for="(item,index) in topUserList"
					:key="index">
					<view @tap="jumpToUserProfile(item.user_id)" class="flex justify-center align-center"
						style="flex-direction: column;width: 50px;flex-wrap: nowrap;">
						<view class="cu-avatar lg round" :style="'background-image: url('+item.avatar+');'"></view>
						<view style="height: 2px;"></view>
						<text class="text-cut" style="max-width: 50px;">{{item.nickname}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="height: 5px;" class="bg-gray"></view>
		<!-- 圈话题 -->
		<view class="flex justify-start align-start padding-bottom solid-bottom"
			style="flex-direction: column;width: 100%;">
			<view class="flex justify-between align-center padding-left padding-right padding-bottom padding-top-sm"
				style="width: 100%;">
				<text class="text-df text-lg text-bold">热聊圈话题</text>
				<text @tap="refreshCircleTopic" class="text-gray">换一批</text>
			</view>
			<view class="flex flex-wrap">
				<view v-for="(item,index) in topicList" :key="index">
					<view @tap="jumpToCircleTopic(item.topic_id)"
						class="cu-tag radius line-black margin-left-sm margin-right-sm margin-bottom-sm">
						<text class="text-black">#</text>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view style="height: 5px;" class="bg-gray"></view>
		<view
			:style="[scrollTop>=floatMenuFixedTop?'z-index:110;width: 100%;height:50rpx;position:fixed;':'z-index:110;width: 100%;height: 85rpx;']+[scrollTop>=floatMenuFixedTop?'top:'+fixNavTop+'px;':'']"
			class="flex justify-start align-start float-menu">
			<v-tabs v-model="currentTab" :ratio="ratio" :fixed="false" height="50rpx" :padding="tabPadding+'px 0px'"
				pills-border-radius="60rpx" bg-color="#fff" :tabs="tabs" :pills="true" :bold="true"
				activeFontSize="32rpx" fontSize="32rpx" activeColor="#FFF" pillsColor="#1cbbb4" :scroll="false"
				@change="changeTab" lineColor="#fff" style="width: 100%;"></v-tabs>
		</view>
		<view v-if="currentTab==3">
			<view class="solid-bottom" style="width: 100%;">
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="circleTab.scrollLeft">
					<view class="cu-item" :class="index==circleTab.current?'text-blue cur':''"
						v-for="(item,index) in circleTab.items" :key="index" @tap="tabSelect" :data-id="index">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
		</view>
		<view v-if="currentTab==2&&isUserLogin==false">
			<view style="height: 50vh;">
				<view class="flex justify-center align-center" style="flex-direction: column;height:40vh;">
					<view class="flex justify-start align-center" style="flex-direction: column;">
						<image src="../../static/images/setting/index_attention.png"
							style="width: 66upx;height: 66upx;"></image>
						<view style="height: 2upx;"></view>
						<text class="text-grey">登录同步关注状态</text>
					</view>
					<view style="height: 20upx;"></view>
					<view class="flex justify-center align-center" style="width: 100%;">
						<button @tap="loginNowAction" class="cu-btn bg-green radius" style="width: 40%;">立即登录</button>
					</view>
				</view>
			</view>
		</view>
		<mescroll-body v-else ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:up="upOption">
			<view v-for="(item,index) in dataList" :key="index">
				<view v-if="currentTab==3||currentTab==4">
					<circle-item @click="jumpToCircleProfile(item)" :circle="item"></circle-item>
				</view>
				<active-post-item v-if="currentTab<3" :showCircle="true"
					@clickTopic="clickTopicAction(item.circle_topic)" @delete="deleteAction(index)"
					@report="reportAction(index)"
					:showDelete="item.owner_id==userInfo.user_id||userInfo.owner_id==circle.owner_id||userInfo.role_id>0"
					@favorite="favoriteAction(index)" @praise="praiseAction(index)" @reward="rewardAction(index)"
					:index="index" @reply="replyComment" @loadMoreComment="loadMoreComment(index,item)"
					@expand="expandAction(index)" @commentAction="sendCommentAction(index,item)" :post="item"
					:circleOwnerId="circle.owner_id"
					@commentExpand="activeCommentExpand"
					></active-post-item>
			</view>
		</mescroll-body>
		<input-panel @onReplySuccess="onReplySuccess" @onCommentSuccess="onCommentSuccess"
			:originInfo="inputPanelOriginInfo" @blur="showInputPanel=false" title="写评论" doneBtn="发表" :autoFocus="true"
			v-if="showInputPanel" class="input-panel"></input-panel>
		<score-pay :userInfo="userInfo" :index="scorePostIndex" @chooseScore="chooseScoreAction"
			@hidden="showScorePay=false" v-if="showScorePay" ref="scorePay" class="input-panel"></score-pay>
		<view class="cu-modal" :class="form.modalStatus">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{formTitle}}</view>
					<view class="action" @tap="form.modalStatus=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl flex justify-start" style="flex-direction: column;">
					<view class="flex justify-center align-center padding-bottom-lg" style="width: 100%;">
						<textarea v-if="form.modalStatus.length > 0"
							class="bg-white radius padding-top padding-left text-left" v-model="form.textInput"
							placeholder="请输入内容"></textarea>
					</view>
					<view class="action flex justify-center padding bg-white" style="width: 100%;">
						<button @tap="commitOperateAction" class="cu-btn round bg-blue" style="width: 90%;">提交</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<publish-choose ref="publishChoose" class="publish-choose"></publish-choose>
		<tabbar @publish="publishClicked" :tabCur="2" :unreadMsgCount="unreadMsgCount" :unreadCount="tabUnreadCount">
		</tabbar>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import ActivePostItem from '@/components/active-post-item.vue';
	import InputPanel from '@/components/input-panel.vue'
	import ScorePay from '@/components/score-pay.vue';
	import CircleTopicItem from '@/components/circle-topic-item.vue'
	import CircleUserItem from '@/components/circle-user-item.vue'
	import CircleItem from '@/components/circle-item.vue'
	import tabbar from '@/components/tabbar.vue'
	import PublishChoose from '@/components/publish-choose.vue'
	import {
		getActivePostByType,
		getActivePostCommentList,
		rewardOther,
		getUserInfoDetail,
		praise,
		favoritePost,
		reportPost,
		deleteActivePost,
		getCircleCategoryList,
		getCircleByCategory,
		getCircleIndexRecommendList,
		getActivePostByAttention,
		getMyCircleList,
		getIndexRecommendTopicList,
		userUnreadCountInfo
	} from '@/api/api.js'
	import {
		checkLogin
	} from '@/js_sdk/checkLogin.js'
	import {
		isLogin,
		getUserInfo,
		updateUserInfo
	} from '@/api/auth.js'
	import {
		getTimeDistance
	} from '@/api/utils.js'
	import config from '@/api/config.js'
	import {
		isCircleIndexNeedRefreshNow,
		saveLastCircleIndexRefreshTime
	} from '@/api/statusCache.js'
	export default {
		mixins: [MescrollMixin],
		components: {
			tabbar,
			ActivePostItem,
			InputPanel,
			ScorePay,
			CircleTopicItem,
			CircleUserItem,
			CircleItem,
			PublishChoose
		},
		computed: {
			formTitle() {
				if (this.form.isPasswordJoin) {
					return '请输入入圈口令'
				}
				if (this.form.isApply) {
					return '请输入加圈理由'
				}
				return '举报'
			},
			isUserLogin() {
				return isLogin()
			},
			fixNavTop() {
				return this.CustomBar
			},
			tabPadding() {
				return 18 * this.ratio
			},
			ratio() {
				return this.windowWidth / 320
			},
		},
		data() {
			return {
				firstInitFloatTop:false,
				unreadMsgCount: 0,
				unreadNotiCount: 0,
				unreadCommentCount: 0,
				unreadMessageCount: 0,
				unreadPraiseCount: 0,
				floatMenuFixedTop: 305,
				topCircleList: [],
				circleTab: {
					scrollLeft: 0,
					items: [],
					current: 0,
				},
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				form: {
					isPasswordJoin: false,
					isApply: false,
					modalStatus: '',
					reportPostId: '',
					textInput: '',
				},
				userInfo: getUserInfo(),
				scorePostIndex: -1,
				showScorePay: false,
				inputPanelOriginInfo: null,
				showInputPanel: false,
				windowWidth: 0,
				windowHeight: 0,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				currentTab: 0,
				tabs: [
					"最新",
					"热门",
					"关注",
					"分类"
				],
				scrollTop: 0.5,
				topicList: [],
				topUserList: []
			}
		},
		onLoad(options) {
			if (isLogin()) {
				this.tabs.push('我的')
			}
			let that = this
			uni.$on('UserLoginSuccess', function() {
				that.tabs.push('我的')
			})
			this.getIndexRecommendList()
			this.initCircleCategoryList()
			let _this = this
			uni.getSystemInfo({
				success(res) {
					_this.windowScale = res.pixelRatio
					_this.windowWidth = res.windowWidth
					console.log('window width:' + res.windowWidth);
					_this.windowHeight = res.windowHeight
					_this.y = (_this.windowHeight / 568) * _this.y
					_this.StatusBar = res.statusBarHeight
					// #ifdef MP-QQ || MP-WEIXIN
					let custom = wx.getMenuButtonBoundingClientRect();
					_this.CustomBar = custom.bottom + custom.top - res.statusBarHeight;
					// #endif
					// #ifdef MP-BAIDU
					let custom = swan.getMenuButtonBoundingClientRect();
					_this.CustomBar = custom.bottom + custom.top - res.statusBarHeight;
					// #endif
				}
			})
		},
		onHide() {
			this.$refs.publishChoose.hiddenTabbar()
		},
		onShow() {
			if (isLogin()) {
				userUnreadCountInfo().then(res => {
					this.unreadMsgCount = res.data.total
					this.unreadCommentCount = res.data.reply_count
					this.unreadMessageCount = res.data.message_count
					this.unreadNotiCount = res.data.notification_count
					this.unreadPraiseCount = res.data.praise_total
					this.unreadPostPraiseCount = res.data.post_praise_count
				})
			}
			if (isCircleIndexNeedRefreshNow()) {
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
			this.$refs.publishChoose.hiddenTabbar()
			uni.$emit('ActivePostListDidSroll')
		},
		methods: {
			activeCommentExpand(passParams) 
			{
				let postIndex = passParams[0]
				let commentIndex = passParams[1]
				let status = this.dataList[postIndex].comment_list[commentIndex].is_expand? false:true
				this.dataList[postIndex].comment_list[commentIndex].is_expand = status
			},
			jumpToAllCircle() {
				uni.navigateTo({
					url: '/pages/lessuse/circle-list/circle-list?mode=all'
				})
			},
			loginNowAction() {
				checkLogin()
			},
			refreshCircleTopic() {
				getIndexRecommendTopicList().then(res => {
					this.topicList = res.data
				}).catch(error => {

				})
			},
			getFloatMenuTop() {
				if(this.firstInitFloatTop==false) {
					let that = this
					let query = uni.createSelectorQuery().in(this)
					query.select('.float-menu').boundingClientRect(data => {
						console.log("得到布局位置信息" + JSON.stringify(data));
						console.log("节点离页面顶部的距离为" + data.top);
						that.floatMenuFixedTop = data.top - that.CustomBar + 5
					}).exec()
					this.firstInitFloatTop = true
				}
			},
			jumpToRecommendCircleProfile(index) {
				let circleId = this.topCircleList[index].circle_id
				uni.navigateTo({
					url: '/pages/lessuse/circle-profile/circle-profile?circleId=' + circleId
				})
			},
			jumpToUserProfile(userId) {
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + userId
				})
			},
			jumpToCircleTopic(topicId) {
				uni.navigateTo({
					url: '/pages/lessuse/circle-topic-post/circle-topic-post?showCircle=1&topicId=' +
						topicId
				})
			},
			getIndexRecommendList() {
				uni.showLoading({
					title: '正在加载...'
				})
				getCircleIndexRecommendList().then(res => {
					uni.hideLoading()
					this.topCircleList = res.data.circle_list
					this.topUserList = res.data.user_list
					this.topicList = res.data.topic_list
					let that = this
					this.$nextTick(function() {
						that.getFloatMenuTop()
					})
				}).catch(error => {
					uni.hideLoading()
				})
			},
			publishClicked() {
				console.log('publish click')
				this.$refs.publishChoose.switchStatus()
			},
			jumpToCircleProfile(item) {
				uni.navigateTo({
					url: '/pages/lessuse/circle-profile/circle-profile?circleId=' + item.circle_id
				})
			},
			tabSelect(e) {
				if (this.currentTab == 3) {
					this.circleTab.current = e.currentTarget.dataset.id;
					this.circleTab.scrollLeft = (e.currentTarget.dataset.id - 1) * 50
					if (this.mescroll) {
						this.mescroll.triggerDownScroll()
					}
				}
			},
			changeTab(index) {
				this.currentTab = index
				if (this.mescroll) {
					this.mescroll.triggerDownScroll()
				}
			},
			clickTopicAction(topic) {
				uni.navigateTo({
					url: '/pages/lessuse/circle-topic-post/circle-topic-post?showCircle=1&topicId=' + topic
						.topic_id
				})
			},
			jumpToCircleTopicDetail(topic) {
				uni.navigateTo({
					url: '/pages/lessuse/circle-topic-post/circle-topic-post?showCircle=1&topicId=' + topic
						.topic_id
				})
			},
			hiddenAndResetForm() {
				this.form.modalStatus = null
				this.form.textInput = ''
				this.form.isApply = false
				this.form.isPasswordJoin = false
			},
			commitOperateAction() {
				if (this.form.textInput.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入举报理由!'
					})
					return
				}
				uni.showLoading({
					title: '正在提交...'
				})
				reportPost(this.form.reportPostId, this.form.textInput).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '举报已提交'
					})
					this.form.modalStatus = null
				}).catch(error => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '提交失败'
					})
				})
			},
			realDeleteActivePost(index) {
				uni.showLoading({
					title: '正在删除...'
				})
				let postId = this.dataList[index].post_id
				deleteActivePost(postId, this.circle.circle_id).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '删除成功!'
					})
					this.dataList.splice(index, 1)
				}).catch(error => {
					uni.hideLoading()
				})
			},
			deleteAction(index) {
				let that = this
				uni.showModal({
					title: '动态删除提示!',
					content: '动态删除后将无法找回，是否继续?',
					cancelText: '手滑了',
					confirmText: '确认删除',
					success: (res) => {
						if (res.confirm) {
							that.realDeleteActivePost(index)
						}
					}
				})
			},
			reportAction(index) {
				this.form.reportPostId = this.dataList[index].post_id
				this.form.modalStatus = 'show'
			},
			onShareAppMessage(res) {
				if (res.from && res.from == "button") {
					if (res.target.dataset !== null && res.target.dataset !== undefined && res.target.dataset.postid !==
						undefined) {
						let dataset = res.target.dataset
						let circle = dataset.circle
						let author = dataset.author
						let postId = dataset.postid
						let title = "快来围观“@" + author + "”在圈子《" + circle + "》发表的精彩动态吧~"
						return {
							title: title,
							path: '/pages/lessuse/active-list/active-list?postId=' + postId + '&outside=1'
						}
					}
				}
				return {
					title: '快来TopicQ发现各种圈子的有趣内容吧～',
					path: '/pages/circle/circle?outside=1'
				}
			},
			onShareTimeline(res) {
				if (res.from && res.from == "button") {
					if (res.target.dataset !== null && res.target.dataset !== undefined && res.target.dataset.postid !==
						undefined) {
						let dataset = res.target.dataset
						let circle = dataset.circle
						let author = dataset.author
						let postId = dataset.postid
						let title = "快来围观“@" + author + "”在圈子《" + circle + "》发表的精彩动态吧~"
						return {
							title: title,
							path: '/pages/lessuse/active-list/active-list?postId=' + postId + '&outside=1'
						}
					}
				}
				return {
					title: '快来TopicQ发现各种圈子的有趣内容吧～',
					path: '/pages/circle/circle?outside=1'
				}
			},
			praiseAction(index) {
				let post = this.dataList[index]
				let oldStatus = post.is_praise
				let newStatus = post.is_praise == 1 ? 0 : 1
				this.dataList[index].is_praise = newStatus
				praise(post.post_id).then(res => {
					this.dataList[index].is_praise = newStatus
					if (newStatus == 1) {
						this.dataList[index].praise_count++
					} else {
						this.dataList[index].praise_count--
					}
					this.$forceUpdate()
				}).catch(error => {
					this.dataList[index].is_praise = oldStatus
				})
			},
			favoriteAction(index) {
				let post = this.dataList[index]
				let oldStatus = post.is_favorite
				let newStatus = post.is_favorite == 1 ? 0 : 1
				this.dataList[index].is_favorite = 1
				favoritePost(post.post_id).then(res => {
					this.dataList[index].is_favorite = newStatus
					if (newStatus == 1) {
						this.dataList[index].favorite_count++
					} else {
						this.dataList[index].favorite_count--
					}
					this.$forceUpdate()
				}).catch(error => {
					this.dataList[index].is_favorite = oldStatus
				})
			},
			chooseScoreAction(params) {
				let score = params[0]
				let index = params[1]
				let postId = this.dataList[index].post_id
				uni.showLoading({
					title: '正在提交...'
				})
				rewardOther(postId, score).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '打赏成功'
					})
					this.showScorePay = false
					updateUserInfo()
					let that = this
					setTimeout(() => {
						that.userInfo = getUserInfo()
					}, 300)
				}).catch(error => {

				})
			},
			rewardAction(index) {
				let otherUserId = this.dataList[index].author.user_id
				if (otherUserId == this.userInfo.user_id) {
					uni.showToast({
						icon: 'none',
						title: '不要自己打赏自己哦~'
					})
					return
				}
				this.showScorePay = true
				this.scorePostIndex = index
			},
			onReplySuccess(params) {
				let postIndex = params[0]
				let comment = params[1]
				let commentList = [comment]
				this.dataList[postIndex].comment_count++
				this.dataList[postIndex].comment_list = commentList.concat(this.dataList[postIndex].comment_list)
			},
			onCommentSuccess(params) {
				let postIndex = params[0]
				let comment = params[1]
				let commentList = [comment]
				this.dataList[postIndex].comment_count++
				this.dataList[postIndex].comment_list = commentList.concat(this.dataList[postIndex].comment_list)
			},
			replyComment(params) {
				let post = this.dataList[params[0]]
				let comment = post.comment_list[params[1]]
				let info = {
					'postId': post.post_id,
					'commentId': comment.comment_id,
					'replyUser': comment.author.nickname,
					'postIndex': params[0]
				}
				this.inputPanelOriginInfo = info
				this.showInputPanel = true
			},
			loadMoreComment(index, post) {
				if (post.comment_load_finish) {
					return
				}
				let lastCommentId = post.comment_list[post.comment_list.length - 1].comment_id
				let num = 5
				getActivePostCommentList(post.post_id, lastCommentId, num).then(res => {
					post.comment_list = post.comment_list.concat(res.data)
					if (post.comment_list.length >= post.comment_count) {
						post.comment_load_finish = true
					}
				}).catch(error => {

				})
			},
			expandAction(index) {
				this.dataList[index].is_expand = !this.dataList[index].is_expand
			},
			sendCommentAction(index, post) {
				let info = {
					'postId': post.post_id,
					'postIndex': index
				}
				this.inputPanelOriginInfo = info
				this.showInputPanel = true
			},
			jumpToPublish() {
				uni.navigateTo({
					url: '/pages/publish/publish-active?circleId=' + this.circleId
				})
			},
			initCircleCategoryList() {
				getCircleCategoryList().then(res => {
					this.circleTab.items = res.data
				}).catch(error => {

				})
			},
			getDataList(pageIndex, pageSize) {
				if (this.currentTab == 4) {
					getMyCircleList(pageIndex, pageSize).then(res => {
						let pageList = res.data.list
						if (pageIndex == 0) {
							this.dataList = pageList
						} else {
							this.dataList = this.dataList.concat(pageList);
						}
						console.log('page length:' + pageList.length)
						let hasNext = pageList.length >= pageSize
						if (this.mescroll) {
							this.mescroll.endSuccess(pageList.length, hasNext);
						}
					}).catch(error => {
						if (this.mescroll) {
							this.mescroll.endErr()
						}
					})
					return
				}
				if (this.currentTab == 3) {
					let categoryId = this.circleTab.items[this.circleTab.current].category_id
					getCircleByCategory(categoryId, pageIndex, pageSize).then(res => {
						let pageList = res.data.list
						if (pageIndex == 0) {
							this.dataList = pageList
						} else {
							this.dataList = this.dataList.concat(pageList);
						}
						console.log('page length:' + pageList.length)
						let hasNext = pageList.length >= pageSize
						if (this.mescroll) {
							this.mescroll.endSuccess(pageList.length, hasNext);
						}
					}).catch(error => {
						if (this.mescroll) {
							this.mescroll.endErr()
						}
					})
					return
				}
				if (this.currentTab == 2) {
					getActivePostByAttention(pageIndex, pageSize).then(res => {
						res.data.list.forEach(item => {
							item.is_expand = false
							item.show_time = getTimeDistance(item.created_at)
							if (item.rich_content && item.rich_content.length > 0) {
								item.rich_content = JSON.parse(item.rich_content)
								item.is_rich_content = true
							}
						})
						let pageList = res.data.list
						if (pageIndex == 0) {
							this.dataList = pageList
						} else {
							this.dataList = this.dataList.concat(pageList);
						}
						console.log('page length:' + pageList.length)
						let hasNext = pageList.length >= pageSize
						if (this.mescroll) {
							this.mescroll.endSuccess(pageList.length, hasNext);
						}
					}).catch(error => {
						if (this.mescroll) {
							this.mescroll.endErr()
						}
					})
					return
				}
				let type = 1
				if (this.currentTab == 1) {
					type = 0
				}
				getActivePostByType(pageIndex, pageSize, type).then(res => {
					res.data.list.forEach(item => {
						item.is_expand = false
						item.show_time = getTimeDistance(item.created_at)
						if (item.rich_content && item.rich_content.length > 0) {
							item.rich_content = JSON.parse(item.rich_content)
							item.is_rich_content = true
						}
						if(item.comment_list&&item.comment_list.length>0) {
							item.comment_list.forEach(comment=>{
								comment.is_expand = false
							})
						}
					})
					let pageList = res.data.list
					if (pageIndex == 0) {
						this.dataList = pageList
					} else {
						this.dataList = this.dataList.concat(pageList);
					}
					console.log('page length:' + pageList.length)
					let hasNext = pageList.length >= pageSize
					if (this.mescroll) {
						this.mescroll.endSuccess(pageList.length, hasNext);
					}
				}).catch(error => {
					if (this.mescroll) {
						this.mescroll.endErr()
					}
				})
			},
			downCallback() {
				this.getIndexRecommendList()
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
				saveLastCircleIndexRefreshTime()
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				this.getDataList(pageIndex, page.size)
			},
		},
	}
</script>

<style scoped>
	.first-img-box {
		position: relative;
		width: 40%;
	}

	.first-img-box::before {
		content: "";
		display: block;
		padding-top: 100%;
	}

	.first-img-box image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 6px;
	}

	.first-name-mask {
		z-index: 2;
		position: absolute;
		bottom: 0.1px;
		left: 0px;
		opacity: 0.3;
		background-color: #000000;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		width: 100%;
		height: 25px;
	}

	.first-name-label {
		z-index: 3;
		position: absolute;
		bottom: 3px;
		left: 8px;
		color: #FFFFFF;
		font-size: 14px;
	}

	.second-img-box {
		position: relative;
		width: 90%;
	}

	.second-img-box::before {
		content: "";
		display: block;
		padding-top: 35%;
	}

	.second-img-box image {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 6px;
	}

	.sort-icon {
		visibility: hidden;
		z-index: 10;
		position: absolute;
		top: -10px;
		left: -5px;
		width: 28px;
		height: 28px;
	}

	.sort-icon image {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.input-panel {
		position: fixed;
		height: 100%;
		width: 100%;
		bottom: 0%;
		z-index: 9999;
	}

	.publish-choose {
		position: fixed;
		width: 100%;
		bottom: 130upx;
		z-index: 111;
	}

	.float-menu {}
</style>
